## 开发环境

```bash
npm create vue@2 # yarn 可能会报错
```

## 模板语法

### 插值语法

- 功能：用于解析标签体内容
- 写法：`{{ xxx }}`，`xxx` 是 js 表达式，且可以直接读取到 `data` 中的所有属性

### 指令语法

- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
- 形式：`v-指令名`

#### 单向数据绑定

- 完整语法：`v-bind:属性="xxx"`
- 简写语法：`:属性="xxx"`

> `xxx` 是 js 表达式，且可以直接读取到 `data` 中的所有属性

```html
<a :href="url">简写</a>

<a v-bind:href="url">完整写法</a>
```

#### 双向数据绑定

- 完整语法：`v-model:value="xxx"`
- 简写语法：`v-model="xxx"`

> 只能应用在表单类元素（输入类元素上，有 `value` 属性）

```html
<div>双向数据绑定：<input type="text" v-model:value="name" /></div>
<div>双向数据绑定：<input type="text" v-model="name" /> (简写)</div>
```

#### 绑定事件

- 完整语法：`v-on:事件名="xxx"`
- 简写语法：`@事件名="xxx"`

##### 事件修饰符

- `prevent`：阻止默认事件
- `stop`：阻止事件冒泡
- `once`：事件只触发一次
- `capture`：使用事件的捕获模式
- `self`：只有 `event.target` 是当前操作的元素时，才触发事件
- `passive`：事件的默认行为立即执行，无需等待事件回调执行完毕

## `data` 与 `el` 的两种写法

### `el` 的两种写法：

- `new Vue()` 时，配置 `el` 属性
- 先创建 `Vue` 实例，随后再通过 `vm.$mount('#root')` 来指定 `el`

### `data` 的两种写法：

- 对象式
- 函数式

> **由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，`this`就不是 Vue 实例了。**

## MVVM 模型

- `M` 模型（Model）：对应 `data` 中的数据
- `V` 视图（View）：模板
- `VM` 视图模型（ViewModel）：Vue 实例对象

![MVVM模型](./vue2/mvvm.png)

## 数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）。

- vue 中的数据代理：通过 vm 对象来代理 `data` 对象中属性的操作（读/写）
- vue 中数据代理的好处：更加方便地操作 `data` 中的数据
- 基本原理：通过 `Object.defineProperty()` 把 `data` 对象中所有属性添加到 vm 上，并为其指定一个`getter/setter`。在 `getter/setter` 内部去操作 `data` 中对应的属性。

## 监视属性

- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在
- 监视的两种写法：
  - `new Vue()` 时，传入 `watch` 配置
  - 通过 `vm.$watch()` 监视
- 可监视属性和计算属性

## 计算属性和监视属性的区别

- 计算属性能完成的，监视属性都可以完成
- 监视属性能完成的，计算属性不一定能完成，比如：监视属性可以进行异步操作
- 原则：
  - 所有被 vue 管理的函数，都写成普通函数，不要写成箭头函数，这样 `this` 的指向才是 `vm` 或组件实例对象
  - 所有不被 vue 管理的函数（定时器回调函数、AJAX 的回调等），最好写成箭头函数，这样 `this` 的指向才是 `vm` 或组件实例对象

## 条件渲染

### `v-if`

- 写法：
  - `v-if="表达式" `
  - `v-else-if="表达式"`
  - `v-else`
- 适用于：切换频率较低的场景。
- 特点：不展示的 DOM 元素直接被移除。
- 注意：`v-if`可以和:`v-else-if`、`v-else`一起使用，但要求结构不能被“打断”。

### `v-show`

- 写法：`v-show="表达式"`
- 适用于：切换频率较高的场景。
- 特点：不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉

> 备注：
>
> - 使用 `v-if`时，元素可能无法获取到，而使用`v-show`一定可以获取到。
>
> - `<template>` 做条件渲染时，只能使用 `v-if`

## vue 监视数据的原理

- vue 会监视 `data` 中所有层次的数据
- 对象数据的监视：通过 `setter` 实现监视，且要在 `new Vue` 时就传入要监视的数据
  - 对象中后追加的属性，vue 默认不做响应式处理
  - 如需要给后添加的属性做响应式，需要使用如下 API：
    - `Vue.set(target, propertyName/index, value)`
    - `vm.$set(target, propertyName/index, value)`
- 数组数据的监视：通过包裹数组更新元素的方法实现，本质就是做了两件事：
  - 调用原生对应的方法对数组进行更新
  - 重新解析模板，进而更新页面
- 修改数组数据的方法
  - 使用这些 API：`push()`、`pop()`、`shift()`、`unshift()`、 `splice()`、`sort()` 和 `reverse()`
  - `Vue.set()` 或 `vm.$set()`

> 特别注意：`Vue.set()` 和 `vm.$set()` 不能给 `vm` 或其根数据对象添加属性！

## 生命周期

![生命周期](./vue2/lifecycle.png)
